<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VNoteX MindMap Viewer</title>

    <!-- 全局样式占位符 -->
    <style type="text/css">
    /* VX_GLOBAL_STYLES_PLACEHOLDER */
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #vx-mindmap {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        background-color: var(--vx-mindmap-background-color);
    }

    /* 主题变量 */
    :root {
        --vx-mindmap-primary-color: var(--vx-primary-color);
        --vx-mindmap-box-color: var(--vx-background-color);
        --vx-mindmap-line-color: var(--vx-border-color);
        --vx-mindmap-root-color: var(--vx-text-color);
        --vx-mindmap-root-background: var(--vx-primary-color);
        --vx-mindmap-child-color: var(--vx-text-color);
        --vx-mindmap-child-background: var(--vx-background-color);
    }

    /* 基础样式 */
    .mind-elixir-node {
        font-family: var(--vx-mindmap-font-family);
        color: var(--vx-mindmap-text-color);
        border: 1px solid var(--vx-mindmap-line-color);
        border-radius: 4px;
        padding: 6px 12px;
        transition: all 0.2s ease;
    }

    .mind-elixir-node:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .mind-elixir-node.selected {
        border-color: var(--vx-mindmap-primary-color);
        box-shadow: 0 0 0 2px var(--vx-mindmap-primary-color);
    }

    /* 连接线样式 */
    .mind-elixir-line {
        stroke: var(--vx-mindmap-line-color);
        stroke-width: 1px;
        transition: stroke 0.2s ease;
    }

    .mind-elixir-line:hover {
        stroke: var(--vx-mindmap-primary-color);
        stroke-width: 2px;
    }

    /* 根节点样式 */
    .mind-elixir-root {
        background-color: var(--vx-mindmap-root-background);
        color: var(--vx-mindmap-root-color);
        font-size: 16px;
        font-weight: bold;
        border: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    /* 子节点样式 */
    .mind-elixir-child {
        background-color: var(--vx-mindmap-child-background);
        color: var(--vx-mindmap-child-color);
        font-size: 14px;
    }
    </style>

    <!-- 主题样式占位符 -->
    <!-- VX_THEME_STYLES_PLACEHOLDER -->

    <!-- 其他样式占位符 -->
    <!-- VX_STYLES_PLACEHOLDER -->

    <!-- 全局配置 -->
    <script type="text/javascript">
        /* VX_GLOBAL_OPTIONS_PLACEHOLDER */
    </script>

    <!-- 脚本占位符 -->
    <!-- VX_SCRIPTS_PLACEHOLDER -->
</head>
<body>
    <div id="vx-mindmap"></div>
</body>
</html>
